import React, { Component } from "react";
import ReactDom from "react-dom";
import "./index.css";

/* 类组件 可写交互 有自己的生命周期 */
// const oDiv = <div>
//   <ul>
//     <li>1</li>
//     <li>2</li>
//     <li>3</li>
//     <li>3</li>
//   </ul>
//   我是内容
// </div>

/* 函数式组件 */
function App() {
  return React.createElement(
    "div",
    null,
    "\u6211\u662F\u5185\u5BB9",
    React.createElement(Com, null),
    React.createElement(Warp, null)
  );
}

function Com() {
  return React.createElement(
    "div",
    null,
    "\u6211\u662F\u7EC4\u4EF6"
  );
}

class Warp extends Component {
  // 定义组件中内部状态
  constructor() {
    super();
    this.state = {
      count: 100,
      num: 2,
      classes: "active",
      flag: true,
      obj: {
        name: "王五"
      },
      arr: [1, 2, 3, 4],
      list: [111, 222, 333, [444, 555]],
      list2: [{
        name: "张三"
      }, {
        name: "李斯特"
      }]
      // block: 'block',
      // none:'none',
    };
  }
  // 渲染视图
  render() {
    //解构赋值拿到 数据
    const {
      count,
      num,
      classes,
      flag,
      obj,
      arr,
      list,
      list2
      // block,
      // none
    } = this.state;
    const span = React.createElement(
      "span",
      null,
      flag ? "未付款" : "已支付"
    );
    return React.createElement(
      "div",
      null,
      "\u7C7B\u7EC4\u4EF6 --",
      (count, num),
      React.createElement(
        "p",
        null,
        "v-show: ",
        React.createElement(
          "span",
          { className: flag ? "block" : "none" },
          "\u901A\u8FC7\u5224\u65AD\u5199class"
        )
      ),
      React.createElement(
        "p",
        null,
        "v-if:\u5546\u54C1\u72B6\u6001\uFF1A",
        span
      ),
      React.createElement(
        "p",
        null,
        "\u5BF9\u8C61\uFF1A",
        obj.name
      ),
      React.createElement(
        "p",
        null,
        "v-else:"
      ),
      React.createElement(
        "p",
        null,
        "v-bind:",
        React.createElement(
          "span",
          { className: classes },
          "\u52A0\u7C7B\u540D"
        )
      ),
      React.createElement(
        "p",
        null,
        "\u6570\u7EC4\uFF1A",
        arr,
        " \u76F4\u63A5\u5C55\u5F00\u4E86"
      ),
      React.createElement(
        "p",
        null,
        "\u5217\u8868\uFF1A ",
        list,
        " \u6570\u7EC4\u5957\u6570\u7EC4 \u76F4\u63A5\u5C55\u5F00\u4E86"
      ),
      React.createElement("br", null),
      React.createElement(
        "p",
        null,
        "v-for: ",
        list2.map(item => {
          return React.createElement(
            "li",
            null,
            item.name
          );
        })
      )
    );
  }
}
ReactDom.render(React.createElement(App, null), document.getElementById("root"), () => {
  console.log('渲染完成');
});
